<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .result{
            position: fixed;
            width: 100%;
            left: 0;
            height: 300px;
            background-color: rgba(0,0,0,.8);
            color: white;
            text-align: center;
            letter-spacing: 2px;
            padding-top: 20px;
            font-size: 18px;
            line-height: 28px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<H1>new Hello World !!!</H1>
<button id="btnAll" style="display: block;margin: 20px auto;width: 160px;height: 60px;" >查看用户信息</button>
<hr/>
<a href="login1.html">login</a>
<a href="add.html">add</a>
<div>
    <table  class="result" id="result">
        <tr>
            <th>id</th>
            <th>userName</th>
            <th>userNameCn</th>
            <th>email</th>
            <th>mobile</th>
            <th>sex</th>
            <th>操作</th>
        </tr>
    </table>
</div>

<script>
    $("#btnAll").click(function(){
        // alert("段落被点击了。");
        getAll();
    });
    function getAll(){
        $.ajax({
            type: "get",
            url: "user/all",
            data: {
            },
            success:function (data) {
                console.log(data)
                // $("#result").empty()
                var trStr = "";
                for(var i = 0;i < data.length;i++){
                    trStr += "<tr id ='' class ='' ><td>"+data[i].id+"</td>";
                    trStr += "<td>"+data[i].userName+"</td>";
                    trStr += "<td>"+data[i].userNameCn+"</td>";
                    trStr += "<td>"+data[i].email+"</td>";
                    trStr += "<td>"+data[i].mobile+"</td>";
                    trStr += "<td>"+data[i].sex+"</td>";
                    trStr += "<td><a href='login1.html?id="+data[i].id+"'>detail</a></td>";
                    trStr +="</tr>";
                    // $("#result").append(JSON.stringify(data[i]) + "<br/>")
                    $("#result").append(trStr);
                }
            },
        });
    }
</script>
</body>
</html>